<script setup lang="ts">
import { useQuickStartStore } from "@/store/modules/quick-start"
import TrainBySetting from "./by-setting.vue"
import TrainScene from "./train-scene.vue"
import TrainSetting from "./train-setting.vue"
import TrainStart from "./train-start.vue"
import { computed, provide, reactive, ref, toRefs, watch } from "vue"
import { QuickStartProcessEnum, TabTypeEnum } from "@/constants/other-keys"
import { ElMessage } from "element-plus"

const store = useQuickStartStore()
const parent = reactive<{
  activeName: TabTypeEnum
}>({
  activeName: store.modeType
})
const process = computed(() => {
  if (evalEndFlag.value) {
    return store.process
  }
  return store.process - 1
})
const serviceType = computed(() => {
  return store.getServiceType()
})
const TrainBySettingRef = ref()
const TrainSceneRef = ref()
const TrainSettingRef = ref()
const TrainStartRef = ref()
const EvalBySettingRef = ref()
const EvalSceneRef = ref()
const EvalSettingRef = ref()
const EvalStartRef = ref()

const trainGCId = ref(serviceType.value && store.processData[serviceType.value]["train"].gcId)
const trainSceneId = ref(serviceType.value && store.processData[serviceType.value]["train"].gameId)
const trainTaskId = ref<string | undefined | null>(
  serviceType.value && store.processData[serviceType.value]["train"].taskId
)
const trainEndFlag = ref(false)
const evalGCId = ref<string | undefined | null>(serviceType.value && store.processData[serviceType.value]["eval"].gcId)
const evalSceneId = ref<string | undefined | null>(
  serviceType.value && store.processData[serviceType.value]["eval"].gameId
)
const evalTaskId = ref(serviceType.value && store.processData[serviceType.value]["eval"].taskId)
const evalEndFlag = ref<boolean>(false)

const handleNextStep = () => {
  if (store.process == QuickStartProcessEnum.TrainBY) {
    // 判断是否选择博弈资源配置
    const gcId = TrainBySettingRef.value.getById()
    if (gcId) {
      serviceType.value && (store.processData[serviceType.value]["train"].gcId = gcId)
      store.process = store.process + 1
    } else {
      store.process = store.process + 1
    }
  } else if (store.process == QuickStartProcessEnum.TrainScene) {
    // 判断是否选择场景参数
    const sceneId = TrainSceneRef.value.getSceneId()
    if (sceneId) {
      serviceType.value && (store.processData[serviceType.value]["train"].gameId = sceneId)
      store.process = store.process + 1
    } else {
      ElMessage.error("请选择场景再进入下一步！")
      return
    }
  } else if (store.process == QuickStartProcessEnum.TrainSetting) {
    const taskId = TrainSettingRef.value.getTaskId()
    if (taskId) {
      serviceType.value && (store.processData[serviceType.value]["train"].taskId = taskId)
      store.process = store.process + 1
    } else {
      ElMessage.error("请创建任务再进入下一步！")
      return
    }
  } else if (store.process == QuickStartProcessEnum.TrainStart) {
    const percentage = TrainStartRef.value.getTrainProcess()
    if (percentage == 100) {
      store.process = store.process + 1
    } else {
      ElMessage.error("训练结束后进入下一步！")
      return
    }
  } else if (store.process == QuickStartProcessEnum.EvalBY) {
    // 判断是否选择博弈资源配置
    const gcId = EvalBySettingRef.value.getById()
    if (gcId) {
      serviceType.value && (store.processData[serviceType.value]["eval"].gcId = gcId)
      store.process = store.process + 1
    } else {
      store.process = store.process + 1
    }
  } else if (store.process == QuickStartProcessEnum.EvalScene) {
    // 判断是否选择场景参数
    const sceneId = EvalSceneRef.value.getSceneId()
    if (sceneId) {
      serviceType.value && (store.processData[serviceType.value]["eval"].gameId = sceneId)
      store.process = store.process + 1
    } else {
      ElMessage.error("请选择场景再进入下一步！")
      return
    }
  } else if (store.process == QuickStartProcessEnum.EvalSetting) {
    const taskId = EvalSettingRef.value.getTaskId()
    if (taskId) {
      serviceType.value && (store.processData[serviceType.value]["eval"].taskId = taskId)
      store.process = store.process + 1
    } else {
      ElMessage.error("请进行评估算法配置再进入下一步！")
      return
    }
  }
}

watch(
  () => TrainStartRef.value,
  () => {
    TrainStartRef.value && TrainStartRef.value.resize()
  }
)

const disabled = computed<boolean>(() => {
  if (store.process == QuickStartProcessEnum.TrainBY) return false
  if (store.process == QuickStartProcessEnum.TrainScene && trainSceneId.value) return false
  if (store.process == QuickStartProcessEnum.TrainSetting && trainTaskId.value) return false
  if (store.process == QuickStartProcessEnum.TrainStart && trainEndFlag.value) return false
  if (store.process == QuickStartProcessEnum.EvalBY) return false
  if (store.process == QuickStartProcessEnum.EvalScene && evalSceneId.value) return false
  if (store.process == QuickStartProcessEnum.EvalSetting && evalTaskId.value) return false
  if (store.process == QuickStartProcessEnum.EvalStart && evalEndFlag.value) return false
  return true
})

toRefs(parent)
provide("parent", parent)
</script>

<template>
  <div class="app-container">
    <el-steps class="mb-4" :space="200" :active="process" simple>
      <el-step title="博弈配置库选择">
        <template #icon>
          <el-icon :size="18"><Edit /></el-icon>
        </template>
      </el-step>
      <el-step title="训练场景选择">
        <template #icon>
          <el-icon :size="18"><Edit /></el-icon>
        </template>
      </el-step>
      <el-step title="训练任务配置">
        <template #icon>
          <el-icon :size="18"><Setting /></el-icon>
        </template>
      </el-step>
      <el-step title="开始训练">
        <template #icon>
          <el-icon :size="18"><VideoPlay /></el-icon>
        </template>
      </el-step>
      <el-step title="博弈配置库选择">
        <template #icon>
          <el-icon :size="18"><Edit /></el-icon>
        </template>
      </el-step>
      <el-step title="评估场景选择">
        <template #icon>
          <el-icon :size="18"><Edit /></el-icon>
        </template>
      </el-step>
      <el-step title="评估任务配置">
        <template #icon>
          <el-icon :size="18"><Setting /></el-icon>
        </template>
      </el-step>
      <el-step title="开始评估">
        <template #icon>
          <el-icon :size="18"><VideoPlay /></el-icon>
        </template>
      </el-step>
    </el-steps>

    <div class="next-btn" v-if="store.process < 8">
      <el-space direction="vertical" :size="18">
        <el-button type="primary" class="next-step" :disabled="disabled" circle @click="handleNextStep">
          <template #icon>
            <el-icon><DArrowRight /></el-icon>
          </template>
        </el-button>
        <el-text :type="disabled ? 'info' : ''">下一步</el-text>
      </el-space>
    </div>

    <TrainBySetting v-if="store.process == 1" ref="TrainBySettingRef" v-model:byId="trainGCId" />
    <TrainScene v-if="store.process == 2" ref="TrainSceneRef" v-model:trainSceneId="trainSceneId" type="Train" />
    <TrainSetting
      v-if="store.process == 3"
      ref="TrainSettingRef"
      :gc-id="trainGCId"
      :id="trainSceneId"
      v-model:trainTaskId="trainTaskId"
      type="Train"
      @to-next="handleNextStep"
    />
    <TrainStart
      v-if="store.process == 4"
      ref="TrainStartRef"
      :id="trainTaskId"
      v-model:trainEndFlag="trainEndFlag"
      type="Train"
    />
    <TrainBySetting v-if="store.process == 5" ref="EvalBySettingRef" v-model:byId="evalGCId" />
    <TrainScene v-if="store.process == 6" ref="EvalSceneRef" v-model:trainSceneId="evalSceneId" type="Inference" />
    <TrainSetting
      v-if="store.process == 7"
      ref="EvalSettingRef"
      :gc-id="evalGCId"
      :id="evalSceneId"
      v-model:trainTaskId="evalTaskId"
      type="Inference"
      @to-next="handleNextStep"
    />
    <TrainStart
      v-if="store.process == 8"
      ref="EvalStartRef"
      :id="evalTaskId"
      v-model:trainEndFlag="evalEndFlag"
      type="Inference"
    />
  </div>
</template>
<style lang="scss" scoped>
.next-btn {
  position: fixed;
  bottom: calc(100vh - 50%);
  right: 20px;
  z-index: 99;
}
.next-step {
  box-shadow: 0 0 20px #b1c8fca7;
}
:deep(.el-step__title) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:deep(.el-step.is-simple:not(:last-of-type) .el-step__title) {
  max-width: 60%;
}
.el-steps--simple {
  padding: 13px 25px;
}
</style>
